<template>
  <div>
    <div>

      <!-- <el-select v-model="searchMode" placeholder="请选择订单类型" style="width: 150px;margin-right: 10px">
        <el-option value="已支付" label="已支付"></el-option>
        <el-option value="已发货" label="已发货"></el-option>
        <el-option value="已收货" label="已收货"></el-option>
      </el-select> -->

      <el-input v-model="searchText" @keyup.enter.native="load" style="width: 200px">
        <i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
      <el-button @click="load" type="primary" style="margin: 10px">搜索</el-button>
      <el-button @click="reset" type="info" style="margin: 10px">重置</el-button>

    </div>

    <el-table :data="tableData" border stripe fixed style="width: 100%">
      <el-table-column prop="id" label="ID" width="50" sortable> </el-table-column>
      <el-table-column prop="orderId" label="订单编号" width="100"></el-table-column>
      <el-table-column prop="order.totalPrice" label="总价" width="100"></el-table-column>
      <el-table-column prop="order.userId" label="下单人id" width="100"></el-table-column>
      <el-table-column prop="order.orderTime" label="下单时间" width="100"></el-table-column>
      <!-- <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="showDetail(scope.row)">详情</el-button>
          <el-popconfirm @confirm="delivery(scope.row)" title="确定发货吗？" v-if="scope.row.state==='已支付'">
            <el-button type="primary" size="mini" slot="reference" style="margin-left: 10px">发货</el-button>
          </el-popconfirm>
        </template>
      </el-table-column> -->

    </el-table>

    <!--分页控件-->
    <div style="margin-top: 10px">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
        :page-size="pageSize" :page-sizes="[3, 5, 8, 10]" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <!--订单详情弹窗-->
    <el-dialog :visible.sync="dialogFormVisible">
      <el-table :data="detail" background-color="black">
        <el-table-column label="图片" width="150">
          <template slot-scope="scope">
            <img :src="scope.row.img" min-width="100" height="100" />
          </template>
        </el-table-column>

        <el-table-column prop="goodId" label="商品id"></el-table-column>
        <el-table-column prop="goodName" label="商品名称"></el-table-column>
        <el-table-column prop="standard" label="商品规格"></el-table-column>
        <el-table-column prop="price" label="单价"></el-table-column>
        <el-table-column prop="discount" label="折扣"></el-table-column>

        <el-table-column label="实价">
          <template slot-scope="scope">
            {{scope.row.price * scope.row.discount}}
          </template>
        </el-table-column>
        <el-table-column prop="count" label="数量"></el-table-column>
        <el-table-column label="总价">
          <template slot-scope="scope">
            {{scope.row.price * scope.row.discount * scope.row.count }}
          </template>
        </el-table-column>

      </el-table>
    </el-dialog>
  </div>
</template>

<script>
  //import API from '../../utils/request'
  const url = "/api/order/"

  export default {
    name: "Order",
    //页面初始化数据
    data() {
      return {
        options: [],
        searchMode: '',
        searchText: '',
        user: {},
        tableData: [],
        pageNum: 1,
        pageSize: 8,
        entity: {},
        total: 0,
        dialogFormVisible: false,
        detail: [],
        //baseApi: this.$store.state.baseApi,
      };
    },
    //页面加载完成
    created() {
      this.load()
    },
    methods: {
      handleSizeChange(pageSize) {
        this.pageSize = pageSize
        this.load()
      },
      handleCurrentChange(pageNum) {
        this.pageNum = pageNum
        this.load()
      },
      //重置搜索
      reset() {
        this.searchMode = '';
        this.searchText = '';
        this.load()
      },
      //页面加载
      async load() {
        //console.log(this)
        let res = await this.$http.get('/orderDetails/current/'+ this.pageNum +'/size/' + this.pageSize)
        console.log(res)
        if (res.code == 200) {
            this.tableData = res.data.list
            this.total = res.data.total
        } else {
            this.$message.error(res.msg)
        }
        /* API.get(url + "/page", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            orderNo: this.searchText,
            state: this.searchMode
          }
        }).then(res => {
          this.tableData = res.data.records || []
          this.total = res.data.total
        }) */
      },
      //展示详情弹出
      showDetail(row) {
        /* this.request.get("/api/order/orderNo/" + row.orderNo).then(res => {
          if (res.code === '200') {
            this.detail = [];
            this.detail.push(res.data);
            this.dialogFormVisible = true;
          }
        }) */
      },
      //订单发货
      delivery(order) {
        /* this.request.get("/api/order/delivery/" + order.orderNo).then(res => {
          if (res.code === '200') {
            this.$message.success("成功发货");
            order.state = '已发货'
          }
        }) */
      },

    },
  };

</script>
